<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<!-- 考勤设备顶部开始 -->

		<view class="clockInTopContent" id="main">

			<view class="clockInTopContentLeft">
				<image class="clockInTopContentLeftImg" src="/static/logo.png" mode=""></image>
				<text class="clockInTopContentLeftTextName">{{device.deviceName}} - {{device.deviceSn}}</text>
				<image src="/static/clock/zaixian.png" class="clockInTopContentLeftImgZaiXian" mode=""></image>
				<text class="clockInTopContentLeftTextStatus" v-if="device.online==true">在线</text>
			</view>

			<!-- 切换按键 -->
			<view class="clockInTopContentRight" @click="switchDevice()">
				<image class="clockInTopContentRightImg" src="/static/clock/qiehuan.png" mode=""></image>
			</view>


		</view>

		<!-- 考勤设备顶部结束 -->

		<scroll-view scroll-y="true" class="Content" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentInner">



				<view class="contentInfo">

					<!-- 日历显示  open 表示是否展开日历 -->
					<view class="contentCalendar">
						<view class="contentCalendarInner">
							<ren-calendar ref='ren' :open="false" :markDays='markDays' :headerBar='true'
								@onDayClick='onDayClick'></ren-calendar>
						</view>
						<!-- <view class="change">选中日期：{{curDate}}</view> -->
					</view>

					<!-- 当日考勤显示开始 -->


					<view class="contentBottom">

						<view class="contentBottomLeft">

							<image src="/static/clock/yiqiandao.png" mode="scaleToFill"
								class="contentBottomLeftBottomImg">
							</image>
							<text class="contentBottomLeftText">今日考勤：{{dayEntity.goWorkTime==null?"":dayEntity.goWorkTime}} {{dayEntity.goWorkType}}</text>

						</view>



					</view>
					<!-- 当日考勤显示结束 -->



				</view>



				<!-- 考勤统计开始 -->


				<view class="statisticContent">

					<view class="statisticContentTop">
						<text class="statisticContentTopLeft">考勤统计</text>
						<text class="statisticContentTopRight">{{curDate}}</text>
					</view>



					<!-- 下半部分开始 -->
					<view class="contentTopDown">
						<view class="contentTopDownTop">
							<text class="contentTopDownTopText">本月迟到(次)</text>
							<text class="contentTopDownTopText">本月早退(次)</text>
							<text class="contentTopDownTopText">本月工时(小时)</text>
						</view>

						<view class="contentTopDownBottom">
							<text class="contentTopDownBottomText">{{dataStatistics.beLate}}</text>
							<text class="contentTopDownBottomText">{{dataStatistics.leaveEarly}}</text>
							<text class="contentTopDownBottomText">{{dataStatistics.workHours}}</text>
						</view>




					</view>
					<!-- 下半部分结束 -->

				</view>
				<!-- 考勤统计结束 -->



				<!-- 应用中心开始 -->

				<view class="clockIn">
					<view class="baseInfoText">
						<text class="baseText">应用中心</text>
					</view>
					<view class="baseList">
						<view class="baseListItem" v-for="(item,index) in clockInList" @click="baseListOnClick(item)">
							<view class="baseListItemOut" :style="{background: item.color}">

							</view>
							<image class="baseListItemImg" :src="item.icon" mode=""></image>
							<text class="baseListItemText">{{item.title}}</text>
						</view>
					</view>
				</view>


				<!-- 应用中心结束 -->
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
  import {getTimeDeviceOne, myTimeDevMonthStatistics, myTimeDevWorktimelogList, timeDeviceList} from "@/pages/api/api.js";

	export default {
		components: {
			MyNav,
			bgImage,
			RenCalendar

		},

		data() {
			return {
				title: '打卡',
				isback: true,
				name: '马化腾',
				occupation: '员工',
				department: '所属部门',

				login: '补卡',
				scrollViewHeight: 0,



				curDate: '',
				markDays: [],
        device: {
          id: '',
          deviceSn: '',
          deviceName: '',
          online: '',
          workTimeId: '',
        },
        dataStatistics: {
          beLate: 0, //迟到
          workHours: 0, //加班
          leaveEarly: 0, //早退
        },

				// 应用中心
				clockInList: [{
						title: '考勤规则',
						icon: '/static/clock/kaoqin_guize.png',
						color: '#0081FF'
					},
					{
						title: '人脸录入',
						icon: '/static/clock/renlian_luru.png',
						color: '#6BAFB1'
					},
					{
						title: '指纹录入',
						icon: '/static/clock/zhiwen_luru.png',
						color: '#FA730A'
					},
					{
						title: '请假申请',
						icon: '/static/clock/qingjia_shenqing.png',
						color: '#7CC563'
					}

				],
				mainTop: '',
        storeId: '',
        tenantId: '',
        userId: '',
        dateList : [],
        dayEntity: {},
			}
		},
		onLoad() {
			// 在其他页面或组件中访问
			const app = getApp();
      this.storeId = app.globalData.storeId
      this.tenantId = app.globalData.tenantId
      this.userId = uni.getStorageSync('userInfo').userId;

		},

		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);


			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// 在其他页面或组件中访问
				const app = getApp();
				this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
					.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();
      console.info('markDays',this.markDays)
      this.getTimeDevice();
		},
		methods: {
      formatDate(value) {
        const data = new Date(value);
        let month = data.getMonth() + 1;
        const year = data.getFullYear();
        month = month < 10 ? "0" + month : month;
        const formattedTime = `${year}-${month}`;
        return formattedTime;
      },
			// 切换可用设备
			switchDevice(){
				uni.navigateTo({
					url: '/subPack/clockIn/availableEquipment/availableEquipment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			onDayClick(data) {
				this.curDate = data.date;
        let month = this.formatDate(this.curDate);
        console.info('month',month)
        // this.myTimeDevWorktimelogList(month);
        let parms = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          pageNum: 1,
          pageSize: 50,
          devId: this.device.id,
          userId: this.userId,
          month: month,
        }
        let d = {
          curDate: this.curDate,
          dateList: this.dateList,
          parms: parms
        }
				// 跳转到考勤记录详情
				uni.navigateTo({
					url: '/subPack/clockIn/attendanceRecord/attendanceRecord?item='+encodeURIComponent(JSON.stringify(d)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

				console.log('选择日期', this.curDate);
			},

      getTimeDevice(){
        let data = {
          storeId: this.storeId,
          tenantId: this.tenantId
        }
        timeDeviceList(data).then((res) => {
          if (res.code == 200) {
            this.device = res.rows[0]
            console.log('device',this.device)
            let month = this.formatDate(this.curDate);
            console.info('month',month)
            this.myTimeDevWorktimelogList(month);
            this.myTimeDevMonthStatistics(month);
          }
        })
      },
      myTimeDevWorktimelogList(month){
        let parms = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          pageNum: 1,
          pageSize: 50,
          devId: this.device.id,
          userId: this.userId,
          month: month,
        }
        myTimeDevWorktimelogList(parms).then((res) =>{
          if(res.code == 200){
            this.dateList = res.rows;
            this.dateList.forEach(item=>{
              if(this.curDate==item.workDate){
                this.dayEntity = item;
              }
            })
          }
        })
      },
      myTimeDevMonthStatistics(month) {
        let parms = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          devId: this.device.id,
          userId: this.userId,
          month: month,
        }
        myTimeDevMonthStatistics(parms).then((res) =>{
          if(res.code == 200){
            this.dataStatistics = res.data;
          }
        })
      },

			baseListOnClick(e) {
				console.log("基础信息点击事件", e.title);

				switch (e.title) {
					case '考勤规则':
						uni.navigateTo({
							url: '/subPack/clockIn/attendanceRules/attendanceRules?workTimeId='+encodeURIComponent(JSON.stringify(this.device.workTimeId)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case '人脸录入':
						uni.navigateTo({
							url: '/subPack/clockIn/faceRecording/faceRecording?devId='+encodeURIComponent(JSON.stringify(this.device.id)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case '指纹录入':
						uni.navigateTo({
							url: '/subPack/clockIn/fingerprintInput/fingerprintInput',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
					case '请假申请':
						uni.navigateTo({
							url: '/subPack/askForLeave/askForLeave/askForLeave',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;
						default:
							break;
				}
			}

		}
	}
</script>

<style>
	.baseListItemText {

		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;

	}

	.baseListItemOut {

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 80rpx;
		height: 80rpx;

		border-radius: 20rpx;

		opacity: 0.08;



	}

	.baseListItemImg {
		width: 44rpx;
		height: 44rpx;
		margin-top: -62rpx;

	}

	.baseListItem {
		display: flex;
		flex-direction: column;
		align-items: center;


		flex: 0 0 calc((100%)/4);

	}

	.baseList {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 29rpx;
	}

	.baseText {
		font-family: HarmonyOS_Sans_SC_Bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 20rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
	}



	.baseInfoText {
		display: flex;
		flex-direction: row;
		align-items: left;
		margin-top: 30rpx;
		width: 100%;

	}

	.clockIn {
		display: flex;

		flex-direction: column;
		width: 690rpx;
		height: 244rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.centerContentTitle {
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.centerContent {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 244rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.statisticContentTopRight {

		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-right: 30rpx;
	}

	.statisticContentTopLeft {

		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;

	}

	.statisticContentTop {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.statisticContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		width: 690rpx;
		height: 221rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.clockInTopContentLeftTextStatus {
		display: flex;
		align-items: center;
		justify-content: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #57B275;
		margin-left: 5rpx;
	}

	.clockInTopContentLeftImgZaiXian {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20rpx;
		height: 20rpx;
		margin-left: 30rpx;
	}

	.clockInTopContentLeftTextName {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;


		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 30rpx;
	}

	.clockInTopContentLeftImg {
		display: flex;
		width: 28rpx;
		height: 60rpx;
		margin-left: 30rpx;
	}

	.clockInTopContentLeft {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.clockInTopContentRightImg {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 34rpx;
		height: 33rpx;
		padding: 5rpx;


	}

	.clockInTopContentRight {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.clockInTopContent {
		display: flex;
		justify-content: space-between;
		align-items: center;

		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.contentOtherDay {

		width: 250rpx;
		height: 250rpx;
		background: #0AE1C6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-bottom: 30rpx;
	}

	.contentCurrentDayOut {

		width: 250rpx;
		height: 250rpx;
		background: #0AE1C6;
		border-radius: 50%;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contentCurrentDayTipText {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;


	}

	.contentCurrentDayTipImg {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;

	}

	.contentCurrentDayTip {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

	}

	.contentCurrentDayTextBottom {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;

		opacity: 0.7;
		display: flex;
		margin-top: 20rpx;
	}

	.contentCurrentDayTextTop {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 30rpx;

		display: flex;
	}

	.contentCurrentDay {

		width: 250rpx;
		height: 250rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 50%;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.ContentInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


		margin-bottom: 30rpx;


	}

	.Content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 900rpx;
		width: 100%;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;



	}

	.login {
		display: flex;
		justify-content: center;

		width: 630rpx;
		height: 100rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-top: 30rpx;

		margin-bottom: 30rpx;



		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.contentInfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		border-radius: 20rpx;
		background: #FFFFFF;

		margin-top: 30rpx;

	}

	.contentBottomLeftBottomText {

		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 30rpx;
		margin-left: 20rpx;
		width: 100%;
	}

	.contentBottomLeftBottomImg {

		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.contentBottomLeftBottom {

		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		width: 100%;



	}

	.contentBottomLeftText {
		display: flex;
		justify-content: left;
		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;

		width: 100%;
		padding-left: 30rpx;

	}

	.contentBottomLeft {

		width: 630rpx;
		height: 80rpx;
		background: #ECF5FD;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
	}

	.contentBottom {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;
		width: 100%;
		margin-bottom: 30rpx;
	}


	.contentCalendarInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 670rpx;
padding: 10rpx;

	}

	.contentCalendar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;



		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.contentTopDownBottomText {

		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		width: 33.33%;
		line-height: 36rpx;

	}

	.contentTopDownBottom {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
	}

	.contentTopDownTopText {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		width: 33.33%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentTopDownTop {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;

	}

	.contentTopDown {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 670rpx;
		height: 124rpx;
		background: #F3F5F9;
		border-radius: 20rpx;
		margin-top: 30rpx;

		margin-bottom: 10rpx;
	}

	.contentTopAbove {
		display: flex;
		flex-direction: row;
		align-items: left;
		justify-content: left;
		margin-top: 30rpx;
		width: 100%;

	}

	.img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 30rpx;


	}

	.info {
		margin-left: 32rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: left;
		margin-top: 28rpx;
	}

	.occupation {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 18rpx;
		margin-left: 19rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;

	}

	.department {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 32rpx;
		margin-top: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.departmentImg {
		width: 10rpx;
		height: 5rpx;
		background: #333333;
		margin-left: 21rpx;
	}

	.infoContent {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		flex-direction: column;


		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 41rpx;
	}

	.contentTop {

		width: 690rpx;
		height: 334rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>
